<template>
    <div style="width: 100%; height: 100%; position: relative">
      <div
        v-if="topNameFlag"
        style="
          display: flex;
          flex-direction: row;
          position: absolute;
          font-weight: bold;
          width: 100%;
        "
        :style="{
          top: topNameConfig.top,
          left: topNameConfig.left,
          right: topNameConfig.right,
          bottom: topNameConfig.bottom,
        }"
      >
        <div
          :style="{
            fontSize: topNameConfig.fontSize ? topNameConfig.fontSize : '18px',
            color: topNameConfig.color ? topNameConfig.color : '#ffffff',
          }"
          class="top_title"
        >
          <div class="topCname">{{ topNameConfig.name }}</div>
        </div>
      </div>
      <div style="width: 100%; height: 100%" ref="ech"></div>
    </div>
  </template>
  <script>
  // 应用echarts主题
  // import "echarts/theme/macarons.js";
  import * as echarts from "echarts";
  import { DUColor } from "../../assets/json/colors.js";
  
  export default {
    title: "roundBar",
    data() {
      return {
        Echarts: null,
        title: "",
        value: 0,
        name: ["综合通过能力", "集装箱通过能力", "港口通过能力"],
        yname: ["沿海港口", "沿江港口", "内河港口"],
        seriesData: [],
        colors: [],
        gridData: {
          XYColor: "#fff",
          top: 40,
          right: 10,
          left: 10,
          bottom: 10,
          fontSize: 13,
          rotate: 0,
          lname: "",
          Rname: "",
          legendWidth: "auto",
          legendHeight: "auto",
          legendTop: "auto",
          legendLeft: "center",
          legendRight: "auto",
          legendBottom: "auto",
          legendOrient: "horizontal",
          interval: 0,
        },
        titleConfig: {
          text: "",
          textStyle: { color: "#fff" },
          left: "auto",
          top: "auto",
          right: "auto",
          bottom: "auto",
        },
        // topNameConfig: {
        //   name: "",
        //   fontSize: "",
        //   color: "",
        //   top: "",
        //   left: "40%",
        //   right: "",
        //   bottom: "",
        // },
      };
    },
    props: {
      topVal: { type: String || Number, default: "30" },
      lineFlag: { type: String || Number, default: "10" },
      topNameFlag: { type: Boolean, default: false },
      topNameConfig: {
        type: Object,
        default: () => ({
          name: "1111",
          fontSize: "",
          color: "",
          top: "",
          left: "0%",
          right: "",
          bottom: "",
        }),
      },
    },
    mounted() {
      var that = this;
      let echartsL = echarts;
      this.$nextTick(() => {
        let echarts = echartsL.init(this.$refs.ech, "macarons");
        this.Echarts = echarts;
        window.addEventListener("resize", () => {
          //重置容器高宽
  
          echarts.resize();
        });
      });
    },
    created() {},
    methods: {
      getRadomData(arryLength) {
        var arry = [];
        for (var i = 0; i < arryLength; i++) {
          arry.push(100 + Math.round(Math.random() * 300));
        }
        return arry;
      },
      drawEchart() {
        let flag = false;
        let names = this.seriesData.map((item) => item["type"]);
        let nameSet = new Set(names);
        if (nameSet.size > 1) {
          flag = true;
        }
        var option = {
          color: this.colors.legend > 0 ? this.colors : DUColor,
          title: this.titleConfig,
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(128, 128, 128, 0.8)",
            textStyle: { color: "#fff" },
            // axisPointer: {
            //   type: "cross",
            // },
            formatter: (params) => {
              if (params.length > 1) {
                let dataStr = `<div><div style="font-weight:bold;">${params[0].name}</div></div>`;
                params.forEach((item) => {
                  dataStr += `<div>
                      <div style="margin: 0 8px;">
                        <span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius: 50%;background-color:${
                          typeof item.color == "string"
                            ? item.color
                            : item.color.colorStops[0].color
                        };"></span>
                        <span>${item.seriesName}</span>
                        <span style="float:right;color:#ffffff;margin-left:20px;">${
                          item.value
                        }${
                    item.data && item.data.unit ? item.data.unit : ""
                  }</span>
                      </div>
                    </div>`;
                });
                return dataStr;
              } else {
                let dataStr = `<div><div style="font-weight:bold;"><span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius: 50%;background-color:${
                  typeof params[0].color == "string"
                    ? params[0].color
                    : params[0].color.colorStops[0].color
                };"></span>${
                  params[0].name
                }<span style="float:right;color:#ffffff;margin-left:20px;">${
                  params[0].value
                }${
                  params[0].data && params[0].data.unit ? params[0].data.unit : ""
                }</span></div></div>`;
                return dataStr;
              }
            },
          },
          // dataZoom: [
          //   this.gridData.dataZoom
          //     ? {
          //         type: "inside", //slider表示有滑动块的，inside表示内置的
          //         show: false,
          //         startValue: 0,
          //         endValue: 4,
          //         xAxisIndex: 0,
          //       }
          //     : "",
          // ],
          grid: {
            right: flag ? this.gridData.right : "1",
            ...this.gridData,
            containLabel: true,
          },
          legend: [
            {
              data: this.type,
              orient: this.gridData.legendOrient,
              itemGap: 5,
              itemWidth: 14,
              itemHeight: 14,
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
              width: this.gridData.legendWidth,
              height: this.gridData.legendHeight,
              // icon: "circle",
              top: this.gridData.legendTop,
              left: this.gridData.legendLeft,
              right: this.gridData.legendRight,
              bottom: this.gridData.legendBottom,
            },
          ],
          yAxis: [
            {
              name: this.gridData.XName,
              type: "category",
              axisLabel: {
                showMinLabel: true,
                color: this.gridData.XYColor,
                fontSize: this.gridData.fontSize,
                rotate: this.gridData.rotate,
                interval: this.gridData.interval, //使x轴文字显示全
              },
              data: this.yname,
            },
          ],
          xAxis: [
            {
              name: this.gridData.lname,
              nameTextStyle: { color: this.gridData.XYColor, fontSize: 14 },
              type: "value",
              position: 0,
              splitArea: {
                show: false,
              },
              axisLabel: {
                color: this.gridData.XYColor,
                fontSize: 12,
                formatter: function (value) {
                  var texts = JSON.stringify(value);
                  if (texts.length > 5) {
                    // 具体多少字就看自己了
                    texts = texts.substr(0, 5) + "...";
                  }
                  return texts;
                },
              },
              splitLine: {
                //分割线配置
                show: true,
                lineStyle: {
                  // color: "#21213C",
                  color: "rgba(190, 223, 249, 0.5)",
                },
              },
            },
            {
              name: this.gridData.Rname,
              nameTextStyle: { color: this.gridData.XYColor, fontSize: 14 },
              type: "value",
              position: 1,
              splitArea: {
                show: false,
              },
              axisLabel: {
                color: this.gridData.XYColor,
                fontSize: 12,
                formatter: function (value) {
                  var texts = JSON.stringify(value);
                  if (texts.length > 3) {
                    // 具体多少字就看自己了
                    texts = texts.substr(0, 3) + "...";
                  }
                  return texts;
                },
              },
              splitLine: {
                //分割线配置
                show: true,
                lineStyle: {
                  // color: "#21213C",
                  color: "rgba(190, 223, 249, 0.5)",
                },
              },
            },
          ],
          series: this.seriesData,
        };
        this.Echarts.setOption(option);
        setTimeout(() => {
          this.Echarts.resize();
        }, 100);
      },
    },
    beforeDestroy() {
      if (this.Echarts) {
        // 清除实例，释放资源
        this.Echarts.dispose();
        // 将实例设为null，避免潜在的内存泄漏
        this.Echarts = null;
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .top_title {
    background-image: url("~@/assets/images/jsgh/frame_hbyxqk@2x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 5px 20px;
    width: 100%;
    text-align: center;
  }
  </style>
  